<template>
  <el-dialog
    :model-value="showClassDialog"
    width="1200"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <template #header>
      <p style="color: black; font-weight: bold">内容选择器</p>
    </template>
    <div class="line"></div>

    <div class="dialog-content">
      <el-tabs v-model="activeName" tab-position="left" @tab-change="handleTabChange">
        <el-tab-pane label="班型列表" name="package" v-if="showTabs.includes('package')">
          <el-table
            ref="classTableRef"
            :data="classData"
            row-key="id"
            @selection-change="(item) => handleSelectionChange(item, 'package')"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="班型信息" width="350"> </el-table-column>
            <el-table-column label="封面图">
              <template #default="scope">
                <el-image
                  class="table-img"
                  preview-teleported
                  :preview-src-list="[scope.row.image]"
                  hide-on-click-modal
                  v-if="scope.row.image"
                  :src="scope.row.image"
                  fit="cover"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="售价" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="会员卡列表" name="card" v-if="showTabs.includes('card')">
          <el-table
            ref="vipCardTableRef"
            :data="vipCardData"
            row-key="id"
            @selection-change="(item) => handleSelectionChange(item, 'card')"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="VIP名称"> </el-table-column>
            <el-table-column label="封面图">
              <template #default="scope">
                <el-image
                  class="table-img"
                  preview-teleported
                  :preview-src-list="[scope.row.backImg]"
                  hide-on-click-modal
                  v-if="scope.row.backImg"
                  :src="scope.row.backImg"
                  fit="cover"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="售价/天数">
              <template #default="scope">
                <p>{{ scope.row.price }}元/{{ scope.row.validity }}/天</p>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!--        <el-tab-pane label="视频课程" name="video" :disabled="isTabDisabled('video')">-->
        <!--          <el-table-->
        <!--            ref="videoTableRef"-->
        <!--            :data="videoTableData"-->
        <!--            row-key="id"-->
        <!--            @selection-change="(item) => handleSelectionChange(item, 'video')"-->
        <!--          >-->
        <!--            <el-table-column type="selection" width="55" />-->
        <!--            <el-table-column prop="name" label="课程名称"></el-table-column>-->
        <!--            <el-table-column label="封面图">-->
        <!--              <template #default="scope">-->
        <!--                <el-image-->
        <!--                  class="table-img"-->
        <!--                  preview-teleported-->
        <!--                  :preview-src-list="[scope.row.img]"-->
        <!--                  hide-on-click-modal-->
        <!--                  v-if="scope.row.img"-->
        <!--                  :src="scope.row.img"-->
        <!--                  fit="cover"-->
        <!--                ></el-image>-->
        <!--              </template>-->
        <!--            </el-table-column>-->
        <!--            <el-table-column prop="car" label="车型">-->
        <!--              <template #default="scope">-->
        <!--                <p>{{ scope.row.carModelList.map((item: any) => item.carName).join(',') }}</p>-->
        <!--              </template>-->
        <!--            </el-table-column>-->
        <!--          </el-table>-->
        <!--        </el-tab-pane>-->

        <el-tab-pane label="教练列表" name="coach" v-if="showTabs.includes('coach')">
          <el-table
            ref="coachTableRef"
            :data="instructorData"
            row-key="id"
            @selection-change="(item) => handleSelectionChange(item, 'coach')"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="教练姓名"> </el-table-column>
            <el-table-column label="封面图">
              <template #default="scope">
                <el-image
                  class="table-img"
                  preview-teleported
                  :preview-src-list="[scope.row.avatar]"
                  hide-on-click-modal
                  v-if="scope.row.avatar"
                  :src="scope.row.avatar"
                  fit="cover"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="联系电话" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          label="训练场列表"
          name="trainingGround"
          v-if="showTabs.includes('trainingGround')"
        >
          <el-table
            ref="trainingTableRef"
            :data="trainingGroundData"
            row-key="id"
            @selection-change="(item) => handleSelectionChange(item, 'trainingGround')"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="训练场名称" width="180"> </el-table-column>
            <el-table-column label="封面图">
              <template #default="scope">
                <el-image
                  class="table-img"
                  preview-teleported
                  :preview-src-list="[scope.row.img]"
                  hide-on-click-modal
                  v-if="scope.row.img"
                  :src="scope.row.img"
                  fit="cover"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="训练场地址" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          label="报名地点列表"
          name="registrationSite"
          v-if="showTabs.includes('registrationSite')"
        >
          <el-table
            ref="registrationSiteTableRef"
            :data="registrationSiteTableData"
            row-key="id"
            @selection-change="(item) => handleSelectionChange(item, 'registrationSite')"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="报名地点" width="180"> </el-table-column>
            <el-table-column label="报名点照片">
              <template #default="scope">
                <el-image
                  class="table-img"
                  preview-teleported
                  :preview-src-list="[scope.row.photo]"
                  hide-on-click-modal
                  v-if="scope.row.photo"
                  :src="scope.row.photo"
                  fit="cover"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="报名地址" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog" style="margin-right: 10px">关闭</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import {
    StudentClassTypeLis,
    getCoach,
    trainingGround,
    getDriveSchoolList
  } from '@/api/driverSchoolApi'
  import { vipEquity } from '@/api/userStudentsApi'
  import { getcategoryList } from '@/api/questionbanklabel'
  const props = defineProps({
    showClassDialog: {
      type: Boolean,
      default: false
    },
    defaultSelectedData: {
      type: Object
    },
    showTabs: {
      type: String
    }
  })

  const emit = defineEmits(['closeDialog'])
  const selectType = ref('')
  const selectItems = ref([])

  const activeName = ref('package')

  const classData = ref([])
  const instructorData = ref([])
  const trainingGroundData = ref([])
  const vipCardData = ref([])
  const videoTableData = ref([])
  const registrationSiteTableData = ref([])

  const classTableRef = ref()
  const coachTableRef = ref()
  const trainingTableRef = ref()
  const vipCardTableRef = ref()
  const videoTableRef = ref()
  const registrationSiteTableRef = ref()

  const showTabs = computed(() => {
    return props.showTabs
      ? [props.showTabs]
      : ['package', 'trainingGround', 'card', 'coach', 'registrationSite']
  })

  function handleSelectionChange(item: any, type: string) {
    selectItems.value = item
    selectType.value = type
  }

  function closeDialog() {
    emit('closeDialog')
  }

  function handleConfirm() {
    let obj = {
      type: selectType.value,
      listData: selectItems.value
    }
    emit('closeDialog', obj)
  }

  async function getClassData() {
    const res = await StudentClassTypeLis({
      pageNum: 1,
      pageSize: 10
    })
    if (res.code === '00000') {
      classData.value = res.data.list

      if (props.defaultSelectedData?.type) {
        nextTick(() => {
          selectItems.value.forEach((row: any) => {
            const match = classData.value.find((item: any) => item.id === row.id)
            if (match) {
              classTableRef.value?.toggleRowSelection(match, true)
            }
          })
        })
      }
    }
  }

  async function getCoachData() {
    const res = await getCoach({
      pageNum: 1,
      pageSize: 10
    })
    if (res.code === '00000') {
      instructorData.value = res.data.list

      if (props.defaultSelectedData?.type) {
        nextTick(() => {
          selectItems.value.forEach((row: any) => {
            const match = instructorData.value.find((item: any) => item.id === row.id)
            if (match) {
              coachTableRef.value?.toggleRowSelection(match, true)
            }
          })
        })
      }
    }
  }

  async function getTrainingAddress() {
    const res = await trainingGround({
      pageNum: 1,
      pageSize: 10
    })
    if (res.code === '00000') {
      trainingGroundData.value = res.data.list

      if (props.defaultSelectedData?.type) {
        nextTick(() => {
          selectItems.value.forEach((row: any) => {
            const match = trainingGroundData.value.find((item: any) => item.id === row.id)
            if (match) {
              trainingTableRef.value?.toggleRowSelection(match, true)
            }
          })
        })
      }
    }
  }

  async function getVipCardData() {
    const res = await vipEquity({
      pageNum: 1,
      pageSize: 10
    })
    if (res.code === '00000') {
      vipCardData.value = res.data.list

      if (props.defaultSelectedData?.type) {
        nextTick(() => {
          selectItems.value.forEach((row: any) => {
            const match = vipCardData.value.find((item: any) => item.id === row.id)
            if (match) {
              vipCardTableRef.value?.toggleRowSelection(match, true)
            }
          })
        })
      }
    }
  }

  async function getVideoData() {
    const res = await getcategoryList.getNewCateGoryId({
      pageNum: 1,
      pageSize: 1000,
      pageUrlType: '02'
    })
    if (res.code === '00000') {
      videoTableData.value = res.data.list[0]?.children || []

      if (props.defaultSelectedData?.type) {
        nextTick(() => {
          selectItems.value.forEach((row: any) => {
            const match = videoTableData.value.find((item: any) => item.id === row.id)
            if (match) {
              videoTableRef.value?.toggleRowSelection(match, true)
            }
          })
        })
      }
    }
  }

  async function getRegistrationSiteData() {
    const res = await getDriveSchoolList({
      pageNum: 1,
      pageSize: 10
    })
    if (res.code === '00000') {
      registrationSiteTableData.value = res.data.list

      if (props.defaultSelectedData?.type) {
        nextTick(() => {
          selectItems.value.forEach((row: any) => {
            const match = registrationSiteTableData.value.find((item: any) => item.id === row.id)
            if (match) {
              registrationSiteTableRef.value?.toggleRowSelection(match, true)
            }
          })
        })
      }
    }
  }

  // function isTabDisabled(tabType: string) {
  //   if (props.defaultSelectedData?.type) {
  //     return props.defaultSelectedData?.type !== tabType
  //   }
  //   return false
  // }

  function handleTabChange() {
    selectItems.value = []
    selectType.value = ''

    // 清除所有表格的选择状态
    classTableRef.value?.clearSelection()
    coachTableRef.value?.clearSelection()
    trainingTableRef.value?.clearSelection()
    vipCardTableRef.value?.clearSelection()
    videoTableRef.value?.clearSelection()
    registrationSiteTableRef.value?.clearSelection()
  }

  onMounted(() => {
    if (props.defaultSelectedData?.type) {
      activeName.value = props.defaultSelectedData?.type
      selectItems.value = props.defaultSelectedData?.listData
    }
    getClassData()
    getCoachData()
    getTrainingAddress()
    getVipCardData()
    getVideoData()
    getRegistrationSiteData()
  })
</script>

<style scoped lang="scss">
  .line {
    height: 1px;
    width: 100%;
    background-color: #f0f0f0;
    margin-top: -20px;
    margin-bottom: 30px;
  }

  .flex-center {
    display: flex;
    align-items: center;
  }

  .table-img {
    width: 48px;
    height: 48px;
  }

  .dialog-content {
    height: 500px;
    overflow: auto;
  }
</style>
